<template>
  <div class="accountContainer">
    <!-- 上方搜索框 -->
    <el-form
      :inline="true"
      :model="formData"
      size="small"
      class="demo-form-inline"
    >
      <el-form-item label="账户号">
        <el-input v-model="formData.account" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="会员类型">
        <el-select v-model="formData.account_type" placeholder="请选择">
          <el-option label="黄金会员" value="黄金会员"></el-option>
          <el-option label="普通会员" value="普通会员"></el-option>
          <el-option label="Vip会员" value="Vip会员"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="账户创建人">
        <el-input
          v-model="formData.username"
          placeholder="请输入姓名"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- <accountForm/> -->
    <!-- 下方表格 -->
    <div class="accountFormWrap">
      <el-table :data="memberList" style="width: 1200px">
        <el-table-column label="会员账户号" width="130">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.account }}</span>
          </template>
        </el-table-column>
        <el-table-column label="会员账户类型" width="130">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.account_type }}</span>
          </template>
        </el-table-column>
        <el-table-column label="账户创建人" width="130">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.username }}</span>
          </template>
        </el-table-column>
        <el-table-column label="账户共享人" width="130">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.share }}</span>
          </template>
        </el-table-column>
        <el-table-column label="账户余额(元)" width="130">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.money }}</span>
          </template>
        </el-table-column>
        <el-table-column label="账户有效期至" width="130">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.deadline }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" class="accountOperation">
          <template slot-scope="scope">
            <el-button type="success" size="mini" round>账户充值</el-button>
            <el-button type="success" size="mini" round>类型变更</el-button>
            <el-button
              type="success"
              size="mini"
              @click="handleEdit(scope.$index, scope.row)"
              >家人共享</el-button
            >

            <el-popconfirm
              style="margin-left: 10px"
              title="这是一段内容确定删除吗？"
              @onConfirm="handleDelete(scope.$index, scope.row)"
            >
              <el-button type="danger" size="mini" slot="reference"
                >删除</el-button
              >
            </el-popconfirm>

            <!-- <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            > -->
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页器 -->
    <el-pagination 
    background 
    layout="prev, pager, next" 
    :total="total" 
    :page-size="5"
    class="pagination"
    @current-change="changepag"
    >
    </el-pagination>
    <!-- 弹出界面 -->
   
  </div>
</template>

<script>
import ajax from "@/api/ajax.js";
import { getDeleteAccount ,findInfo,getInfo} from "@/api";
// import accountForm from "./accountForm.vue";
export default {
  name: "account",
  data() {
    return {
      // 表单收集
      formData: {
        account: "",
        account_type: "",
        username: "",
      },
      // 下方表格数据
      memberList: [],
      total:0,
    
    };
  },
  methods: {
    // 搜索后台数据
    async findInfos(index=1){
      let infoObj = {}
      infoObj.account=this.formData.account
      infoObj.account_type=this.formData.account_type
      infoObj.username=this.formData.username
      let result = await findInfo(infoObj)
      if (result.code === 200) {
        console.log(result)
        this.memberList = result.data.slice((index-1)*5,index*5);
        this.total = result.data.length
      }
    },
    // 获取后台数据的回调
    async getInfoAll(index=1){
      console.log(111)
    let result = await getInfo()
          // console.log(result)
    if(result.code === 200){
        this.total = result.data.length
        this.memberList = result.data.slice((index-1)*5,index*5);
    }
    },

    // 点击分页器的回调
    changepag(index){
      if(this.formData.account || this.formData.account_type || this.formData.username){
        this.findInfos(index)
      }else{
      this.getInfoAll(index)
      }

    },
    // 表单提交的回调
    onSubmit() {
      // 这里应该是一个收集三个数据的ajax请求
      this.findInfos()
    },
    // 右方按钮点击的回调
    handleEdit(index, row) {
      console.log(index, row);
    },
    // 删除的回调
    async handleDelete(index, row) {
      console.log("删出执行了");
      // console.log(index, row);
      //根据会员卡号进行删除
      let result = await getDeleteAccount(row.account);
      if (result.status === 200) {
        this.$message.success(result.data);
        // //重新获取会员列表
        let accountInfo = await this.getInfoAll()

      }
    },
  },
  mounted() {
    this.getInfoAll()
  },
};
</script>

<style scoped>
.accountContainer {
  margin: 20px 0;
}
.pagination{
  margin:0 auto;
  text-align:center;

}
</style>
